<template>
  <el-card class="create-live-code-container">
    <h3>创建群活码</h3>
    <el-alert title="禁止上传违法违规内容，禁止将本功能用于违法，违规用途，一经发现立即停用活动并封停账号！" type="danger" show-icon></el-alert>
    <el-steps :active="activeStep" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps>
    <div class="user-group-live-code-content">
      <el-form ref="createLiveCodeFormRef" :model="createLiveCodeForm" :rules="createLiveCodeFormRules" label-width="120px" label-position="left">
        <div v-show="activeStep === 0" @keyup.enter="nextStep">
          <el-form-item prop="name" label="创建活码">
            <el-input v-model="createLiveCodeForm.name" placeholder="请输入活码名称"></el-input>
          </el-form-item>
          <el-radio-group v-model="createLiveCodeForm.type">
            <el-radio :label="1">普通活码</el-radio>
            <el-radio :label="2">
              分组活码
              <span class="iconfont icon-wenti_yiwen"></span>
            </el-radio>
          </el-radio-group>
        </div>
        <div v-show="activeStep === 1" @keyup.enter="createLiveCode">
          <el-form-item label="活码标题">
            <el-input v-model.trim="createLiveCodeForm.title" placeholder=" 请输入活动页标题名称"></el-input>
          </el-form-item>
          <el-form-item label="引导文字">
            <el-input type="textarea" rows="4" v-model.trim="createLiveCodeForm.remark" placeholder="展示在二维码下方的引导文字"></el-input>
          </el-form-item>
          <el-form-item prop="domain" label="入口域名">
            <el-select v-model="createLiveCodeForm.domain" placeholder="请选择入口域名">
              <el-option v-for="item in domainList.entryDomain" :key="item.id" :label="item.domain" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <template #label>
              客服功能 <span class="iconfont icon-wenti_yiwen"></span>
            </template>
            <el-radio-group v-model="createLiveCodeForm.cs_code_state">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="cs_code" v-if="createLiveCodeForm.cs_code_state === 1">
            <div class="upload-box">
              上传客服二维码
              <el-upload
                class="avatar-uploader"
                :action="baseUrl+'/upload'"
                :headers="uploadHeader"
                :data="{path:'kefu_code'}"
                :show-file-list="false"
                :on-success="(response)=>handleAvatarSuccess('cs_code',response)"
              >
                <div class="img-box" v-if="createLiveCodeForm.cs_code">
                  <img :src="`${baseUrl}/${createLiveCodeForm.cs_code}`" class="avatar">
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              安全提示 <span class="iconfont icon-wenti_yiwen"></span>
            </template>
            <el-radio-group v-model="createLiveCodeForm.tips">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <template #label>
              跳转模式 <span class="iconfont icon-wenti_yiwen"></span>
            </template>
            <el-radio-group v-model="createLiveCodeForm.jump_type">
              <el-radio :label="1">防封模式</el-radio>
              <el-radio :label="2">极速模式</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="live-code-link" v-if="activeStep === 2">
          <img :src="baseUrl+'/'+liveCodeInfo.code" alt="">
        </div>
        <div class="btn-box">
          <el-button @click="cancelCreate('createLiveCodeFormRef')" v-if="activeStep === 0">取消</el-button>
          <el-button @click="activeStep = 0" v-if="activeStep === 1" plain>上一步</el-button>
          <el-button type="primary" @click="nextStep" v-if="activeStep === 0">下一步</el-button>
          <el-button type="primary" @click="createLiveCode" v-if="activeStep === 1">创建活码</el-button>
          <el-button type="primary" @click="gotoLiveCodeManage" v-if="activeStep === 2">活码管理</el-button>
        </div>
      </el-form>
      <div class="live-code-introduction" v-show="activeStep === 0">
        <h3>活码功能介绍</h3>
        <p>
          1.活码并未改变微信原有规则，只提供了一个固定不变的入口二维码，根据人数自动换群及扫码数据统计分析等功能。<br>
          2.群二维码有效期仅为7天，系统会提前一天通过服务号发送群二维码即将到期提醒，请及时更新二维码，避免因群二维码过期无法进群。<br>
          3.微信群超过100人无法扫码只能邀请进群，解决方案是每个人群控制在100人以内，需要提前准备多给空群，每进群100人自动换新群，从而实现所有人都可以快速的扫码进群。
        </p>
        <h3>注意事项</h3>
        <p>
          根据《微信外链管理规范》，禁止发布任何违法，违规内容（含诱导分享/关注/集赞/红包等），如因内容违规导致域名被封，系统将不再重新分配域名，且情节严重者将封停账号。
        </p>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { addLiveCode, fallList } from '@/axios/userRequest'
import baseUrl from '@/axios/baseUrl'
import { useStore } from 'vuex'
const { proxy } = getCurrentInstance()
const router = useRouter()
let Store = useStore()
const uploadHeader = {'token':localStorage.getItem('userCenter_token')}

const createLiveCodeForm = reactive({
  name:'',
  type: 1,
  title:'',
  remark:'',
  cs_code:'',
  domain:'',
  cs_code_state: 1,
  tips: 1,
  jump_type: 1
})

// 当前的步骤
let activeStep = ref(0)
// 入口域名列表
const domainList = reactive({
  entryDomain:[],
})

const getDomainList = () => {
  fallList({type:1}).then(res=>{
    if(res.code === 0){
      domainList.entryDomain = res.data.data['1']
      Store.commit('userStore/changeStoreState',['LiveCodeInDomainList',res.data.data['1']])
    }else{
      proxy.$message.error(res.msg)
    }
  })
}

// 下一步
const nextStep = async ()=>{
  if(createLiveCodeForm.name !== ''){
    activeStep.value = 1
    if(Store.state.userStore.LiveCodeInDomainList){
      domainList.entryDomain = Store.state.userStore.LiveCodeInDomainList
    }else{
      getDomainList()
    }
  }
}

// 创建活码验证规则
const createLiveCodeFormRules = {
  name:{ required: true,message: '请输入群活码名称' },
  domain:{ required: true,message: '请选择入口域名' },
  to_domain:{ required: true,message: '请选择落地域名' },
  cs_code:{ required: true,message: '请上传客服二维码' }
}

// 创建活码
let liveCodeInfo = ref([])
const createLiveCode = ()=>{
  proxy.$refs.createLiveCodeFormRef.validate(async valid=>{
    if(valid){
      const res = await addLiveCode(createLiveCodeForm)
      if(res.code === 0){
        proxy.$message.success(res.msg)
        activeStep.value = 2
        liveCodeInfo.value = res.data
      }else{
        proxy.$message.error(res.msg)
      }
    }
  })
}

// 头像上传成功
const handleAvatarSuccess = (name,response)=>{
  if(response.code === 0){
    createLiveCodeForm.cs_code = response.data.path
  }else{
    proxy.$message.error(response.msg)
  }
}

// 前往活码管理
const gotoLiveCodeManage = () =>{
  if(liveCodeInfo.value.type === 2){
    router.push(`/user-center/live-code/group/${liveCodeInfo.value.id}`)
  }else if (liveCodeInfo.value.type === 1){
    router.push(`/user-center/live-code/ordinary/${liveCodeInfo.value.id}`)
  }
}

// 取消创建
const cancelCreate = formNameRef => {
  activeStep.value = 0
  proxy.$refs[formNameRef].resetFields()
  router.back()
}
</script>

<style lang="less" scoped>
.create-live-code-container{
  min-height: 100%;
  border-radius: 52px 12px 12px;
  &:deep(.el-card__body){
    padding: 40px 30px 30px;
    .card-title{
      .card-title-left{
        display: flex;
        align-items: center;
        .sub-title{
          margin-left: 10px;
        }
      }
    }
    .el-alert{
      margin-top: 25px;
      .el-alert__content{
        padding-left: 20px;
      }
    }
    .el-steps{
      width: 688px;
      margin: 20px auto 0;
      .el-step__head {
        .el-step__line {
          margin: 0 40px 0 70px;
          top: 20px;
        }
        .el-step__icon {
          width: 40px;
          height: 40px;
          font-size: 16px;
        }
      }
    }
    .user-group-live-code-content{
      max-width: 1000px;
      margin: 0 auto;
      .el-form{
        margin-top: 40px;
        .el-form-item{
          .el-form-item__label{
            padding-bottom: 0;
            color: @title;
            span.icon-wenti_yiwen{
              color: @subtitle;
              font-size: 12px;
              cursor: pointer;
            }
          }
          .el-form-item__content{
            .upload-box{
              margin-top: 20px;
              display: flex;
              color: @secondary;
              .el-upload{
                margin-left: 20px;
              }
              .img-box{
                width: 72px;
                height: 72px;
              }
              .avatar{
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .el-radio-group{
          .el-radio{
            margin-right: 40px;
          }
        }
        .btn-box{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .el-button{
            width: 140px;
            height: 40px;
          }
        }
        .live-code-link{
          width: 200px;
          margin: 40px auto;
          img{
            width: inherit;
            height: 200px;
          }
        }
      }
      .live-code-introduction{
        width: 100%;
        box-sizing: border-box;
        padding: 20px 32px 15px;
        border: 1px dashed @border-info;
        margin-top: 80px;
        h3{
          font-size: 16px!important;
          color: @title;
        }
        p{
          color: @subtitle;
          line-height: 32px;
          font-size: 14px;
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
